<template>
    <div>
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" v-if="mobanType == 1">
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='detail'">
                <el-col :span="24">
                    <div class="fss">
                       <slot name="formtemDatatype"></slot>
                        <el-form-item label="模板名称" prop="stationTypeName" >
                            <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <vxe-table border="inner" height="500" show-overflow ref="tableRef"
                        :column-config="{resizable: true}" :data="state.tableData"
                        :edit-config="{trigger: 'manual', mode: 'row'}">
                        <vxe-column field="name" title="测点号" :edit-render="{}">
                            <template #default="{ row }">
                                <span>{{row.name }}</span>
                            </template>
                            <template #edit="{ row }">
                                <el-select v-model="row.name" size="small">
                                    <el-option v-for="item in state.mobanList" :key="item.tabIndex" :label="item.name"
                                        :value="item.tabIndex" />
                                </el-select>
                            </template>
                        </vxe-column>
                        <vxe-column field="name" title="传感器名称" :edit-render="{}">
                            <template #default="{ row }">
                                <span>{{row.name }}</span>
                            </template>
                            <template #edit="{ row }">
                                <el-select v-model="row.name" size="small">
                                    <el-option v-for="item in state.mobanList" :key="item.tabIndex" :label="item.name"
                                        :value="item.tabIndex" />
                                </el-select>
                            </template>
                        </vxe-column>
                        <vxe-column field="name" title="单位"></vxe-column>
                        <vxe-column title="操作" width="160">
                            <template #default="{ row }">
                                <template>
                                    <el-button link type="primary">确定</el-button>
                                </template>
                                <template>
                                    <el-button link type="primary">编辑</el-button>
                                </template>
                                <el-button link type="danger">删除</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                    <div style="text-align: center;">
                        <el-button link type="primary">
                            <el-icon>
                                <Plus />
                            </el-icon>新增
                        </el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='log'">
                <el-col :span="16">
                    <el-form-item label="选择日期" prop="stationTypeName" label-position="left">
                        <el-date-picker v-model="state.formData.stationTypeName" type="datetimerange"
                            range-separator="-" start-placeholder="请选择" end-placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板类型" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板名称" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <vxe-table border="inner" height="500" show-overflow ref="tableRef" :data="state.tableData">
                        <vxe-column type="seq" title="序号"></vxe-column>
                        <vxe-column field="name" title="使用时间"></vxe-column>
                        <vxe-column field="name" title="模板名称"></vxe-column>
                        <vxe-column field="name" title="使用对象"></vxe-column>
                        <vxe-column field="name" title="操作人"></vxe-column>
                    </vxe-table>
                </el-col>
            </el-row>
        </el-form>
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" v-if="mobanType == 2" label-position="top">
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='detail'">
                <el-col :span="12">
                    <div class="fbc">
                       <slot name="formtemDatatype"></slot>
                        <el-form-item label="模板名称" prop="stationTypeName" >
                            <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="电源路数" prop="stationTypeName">
                        <el-select v-model="state.formData.configType" placeholder="请选择" clearable>
                            <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <vxe-table border="inner" height="500" show-overflow ref="tableRef"
                        :column-config="{resizable: true}" :data="state.tableData">
                        <vxe-column field="name" title="传感器名称"></vxe-column>
                        <vxe-column field="name" title="量程范围"></vxe-column>
                        <vxe-column field="name" title="频率范围"></vxe-column>
                        <vxe-column title="操作" width="160">
                            <template #default="{ row }">
                                <el-button link type="danger">删除</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='log'">
                <el-col :span="16">
                    <el-form-item label="选择日期" prop="stationTypeName" label-position="left">
                        <el-date-picker v-model="state.formData.stationTypeName" type="datetimerange"
                            range-separator="-" start-placeholder="请选择" end-placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板类型" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板名称" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <vxe-table border="inner" height="500" show-overflow ref="tableRef" :data="state.tableData">
                        <vxe-column type="seq" title="序号"></vxe-column>
                        <vxe-column field="name" title="使用时间"></vxe-column>
                        <vxe-column field="name" title="模板名称"></vxe-column>
                        <vxe-column field="name" title="使用对象"></vxe-column>
                        <vxe-column field="name" title="操作人"></vxe-column>
                    </vxe-table>
                </el-col>
            </el-row>
        </el-form>
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" v-if="mobanType == 'A'"
            label-position="top">
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='detail'">
                <el-col :span="12">
                    <div class="fbc">
                       <slot name="formtemDatatype"></slot>
                        <el-form-item label="模板名称" prop="name" >
                            <el-input v-model="state.formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="原因" prop="reason">
                        <el-input type="textarea" v-model="state.formData.reason" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="处理措施" prop="measure">
                        <el-input type="textarea" v-model="state.formData.measure" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="处理结果" prop="result">
                        <el-input type="textarea" v-model="state.formData.result" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='log'">
                <el-col :span="16">
                    <el-form-item label="选择日期" prop="stationTypeName" label-position="left">
                        <el-date-picker v-model="state.formData.stationTypeName" type="datetimerange"
                            range-separator="-" start-placeholder="请选择" end-placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板类型" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板名称" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <vxe-table border="inner" height="500" show-overflow ref="tableRef" :data="state.tableData">
                        <vxe-column type="seq" title="序号"></vxe-column>
                        <vxe-column field="name" title="使用时间"></vxe-column>
                        <vxe-column field="name" title="模板名称"></vxe-column>
                        <vxe-column field="name" title="使用对象"></vxe-column>
                        <vxe-column field="name" title="操作人"></vxe-column>
                    </vxe-table>
                </el-col>
            </el-row>
        </el-form>
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" v-if="mobanType == 'B'"
            label-position="top">
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='detail'">
                <el-col :span="12">
                    <div class="fbc">
                       <slot name="formtemDatatype"></slot>
                        <el-form-item label="模板名称" prop="templateName" >
                            <el-input v-model="state.formData.templateName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="类型" prop="templateType">
                        <el-select v-model="state.formData.templateType" placeholder="请选择" clearable
                            @change="changeType">
                            <el-option v-for="dict in state.conditionList" :key="dict" :label="dict" :value="dict" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="单位" prop="unit">
                        <el-select v-model="state.formData.unit" placeholder="请选择" clearable disabled>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <h4>编辑公式</h4>
                    <el-form-item label="计算因子" prop="parentAreaId">
                        <el-cascader ref="cascaderValue" v-model="state.formData.parentAreaId" @change="nodeclick"
                            :options="state.pressionList" clearable :props="{  children: 'children',
                            value: 'code', label: 'name',emitPath:false}" />
                        <el-button style="margin-left:10px" type="primary" plain @click="selSubmitClick">选择
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-tag class="hover" style="margin-right:10px;" v-for="tag in state.dynamicTags" :key="tag.code"
                        closable @close="handleClose(tag)" @click="processbtnClick(tag.name,tag.code)">
                        {{ tag.name }}
                    </el-tag>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="运算符号" prop="stationTypeName">
                        <el-button style="padding:20px;margin:10px 5px;" v-for="item in state.biaodaList" plain
                            @click="processbtnClick(item.sub)">
                            {{ item.name }}<br />
                            {{ item.sub }}
                        </el-button>
                    </el-form-item>
                </el-col>
                <p style="font-size:14px;margin-left:10px;">公式（请点击上方计算因子与运算符号填入公式，键盘可直接录入数字与符号）</p>
                <el-col :span="24">
                    <el-form-item label="" prop="stationTypeName">
                        <div class="fbc w100">
                            <el-input style="width:98%;" id="textarea" type="textarea"
                                v-model="state.formData.expression" placeholder="请输入">
                            </el-input>
                            <span style="white-space: pre-wrap;display:inline-block
                                ;background: rgba(0, 186, 173, 1);
                                border-radius: 0px 2px, 2px, 0px;
                                color:#fff;writing-mode: vertical-rl;
                                padding:10px;
                                " @click="yanzheng">验证公式</span>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top:10px;" v-if="tabradio=='log'">
                <el-col :span="16">
                    <el-form-item label="选择日期" prop="stationTypeName" label-position="left">
                        <el-date-picker v-model="state.formData.stationTypeName" type="datetimerange"
                            range-separator="-" start-placeholder="请选择" end-placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板类型" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="模板名称" prop="stationTypeName" label-position="left">
                        <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <vxe-table border="inner" height="500" show-overflow ref="tableRef" :data="state.tableData">
                        <vxe-column type="seq" title="序号"></vxe-column>
                        <vxe-column field="name" title="使用时间"></vxe-column>
                        <vxe-column field="name" title="模板名称"></vxe-column>
                        <vxe-column field="name" title="使用对象"></vxe-column>
                        <vxe-column field="name" title="操作人"></vxe-column>
                    </vxe-table>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="20" style="margin-top:10px;" v-if="mobanType == 5">
            <el-col :span="16">
                <el-form-item label="选择日期" prop="stationTypeName" label-position="left">
                    <el-date-picker v-model="state.formData.stationTypeName" type="datetimerange" range-separator="-"
                        start-placeholder="请选择" end-placeholder="请选择" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="模板类型" prop="stationTypeName" label-position="left">
                    <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="模板名称" prop="stationTypeName" label-position="left">
                    <el-input v-model="state.formData.stationTypeName" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <vxe-table border="inner" height="500" show-overflow ref="tableRef" :data="state.tableData">
                    <vxe-column type="seq" title="序号"></vxe-column>
                    <vxe-column field="name" title="使用时间"></vxe-column>
                    <vxe-column field="name" title="模板名称"></vxe-column>
                    <vxe-column field="name" title="使用对象"></vxe-column>
                    <vxe-column field="name" title="操作人"></vxe-column>
                </vxe-table>
            </el-col>
        </el-row>
        <div class="footer-form" style="text-align:right;">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">
                确定
            </el-button>
        </div>
    </div>
</template>
<script setup>
    import {
        onBeforeMount,
        ref,
        watch,
        reactive,
        toRefs,
        toRef,
        watchEffect
    } from "vue"
    import axios from "@/utils/request"
    import {
        ElMessage
    } from "element-plus";
    const {
        proxy
    } = getCurrentInstance();
    const expressList = ref([])
    const props = defineProps({
        mobanType: {
            default: '1',
            type: String
        },
        tabradio: {
            default: 'detail',
            type: String
        },
        editId: {
            default: undefined,
            type: String
        },
        isShow:{
            default: false,
            type: Boolean
        }
    })
    const emits = defineEmits(["addModal"])
    const state = reactive({
        formData: {},
        rules: {},
        tableData: [],
        mobanList: [],
        conditionList: ['模拟量', '开关量'],
        tagValue: undefined,
        tagCode: undefined,
        dynamicTags: [],
        biaodaList: [{
                name: '加',
                sub: '+'
            }, {
                name: '减',
                sub: '-'
            }, {
                name: '乘',
                sub: '*'
            }, {
                name: '除',
                sub: '/'
            }, {
                name: '左括号',
                sub: '('
            }, {
                name: '右括号',
                sub: ')'
            }, {
                name: '与',
                sub: '&&'
            }, {
                name: '或',
                sub: '||'
            }, {
                name: '等于',
                sub: '=='
            }, {
                name: '大于',
                sub: '>'
            }, {
                name: '大于等于',
                sub: '>='
            },
            {
                name: '小于',
                sub: '<'
            }, {
                name: '小于等于',
                sub: '<='
            }, {
                name: '清',
                sub: '空'
            }
        ],
        pressionList: [],
        editId: undefined

    })
    // 获取计算因子下拉
    function searchexpressionListdata() {
        axios.get('template/expression/getExpressionTree').then(res => {
            console.log(res);
            state.pressionList = res.data
        })
    }
    searchexpressionListdata()
    // 公式类型事件
    const changeType = (val) => {
        if (val == '模拟量') {
            state.formData.unit = 'ppm'
        } else {
            state.formData.unit = ''
        }
    }
    // 计算因子
    function nodeclick(val) {
        if (val) {
            state.tagValue = proxy.$refs["cascaderValue"].getCheckedNodes()[0].label
            state.tagCode = val
        }
    }

    function selSubmitClick() {
        state.dynamicTags.push({
            name: state.tagValue,
            code: state.tagCode
        })
        state.dynamicTags = Array.from(new Set(state.dynamicTags))
    }

    function handleClose(tag) {
        state.dynamicTags.splice(state.dynamicTags.indexOf(tag), 1)
    }

    function processbtnClick(myValue, type) {
        if (type) {
            if (!state.formData.nameDtoList) {
                state.formData.nameDtoList = []
            }
            state.formData.nameDtoList.push({
                name: myValue,
                code: type
            })
        }
        if (myValue != '空') {
            const myField = document.querySelector('#textarea')
            var startPos = myField.selectionStart
            var endPos = myField.selectionEnd
            state.formData.expression = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos,
                myField.value
                .length)
            nextTick(() => {
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            })
        } else {
            state.formData.expression = ''
        }
    }

    function yanzheng() {
        axios.post('/template/expression/check', {
            expression: state.formData.expression,
            templateType: state.formData.templateType,
            nameDtoList: state.formData.nameDtoList
        }).then(res => {
            if (res.code == 200) {
                ElMessage.success(res.data)
            }
        })
    }
    // 获取公式详情
    const getExpressionInfo = async (id) => {
        await axios.get(`template/expression/getExpressionById/${id}`).then(res => {
            state.formData = res.data
            state.dynamicTags = []
            res.data.nameDtoList.forEach(it => {
                state.dynamicTags.push({
                    name: it.name,
                    code: it.code
                })
                state.pressionList.forEach(item => {
                    item.children.forEach(item2 => {
                        if (item2.children) {
                            item2.children.forEach(item3 => {
                                if (it.code == item3.code) {
                                    item3.disabled = true
                                }
                            })
                        } else {
                            if (it.code == item2.code) {
                                item2.disabled = true
                            }
                        }
                    })
                })
            })
        })
    }
    // 获取分析详情
    const getaysInfo = async (id) => {
        await axios.post('template/analysis/list', {
            id: id
        }).then(res => {
            state.formData = res.data[0]
        })
    }
    watchEffect(() => {
        state.editId = props.editId
        if (props.editId) {
            if (props.mobanType == 'B') {
                getExpressionInfo(props.editId);
            } else if (props.mobanType == 'A') {
                getaysInfo(props.editId)
            }
        } else {
            state.formData = {}
            state.dynamicTags = []
            state.formData.parentAreaId=undefined
            state.dynamicTags=[]

        }
    })

    function submitForm() {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                let url = ''
                if (props.editId) {
                    if (props.mobanType == 'A') {
                        url = '/template/analysis/update'
                    } else if (props.mobanType == 'B') {
                        url = '/template/expression/saveTemplate'
                    }
                } else {
                    if (props.mobanType == 'A') {
                        url = '/template/analysis/save'
                    } else if (props.mobanType == 'B') {
                        url = '/template/expression/saveTemplate'
                    }
                }
                axios.post(url, state.formData).then(res => {
                    if (res.code == 200) {
                        proxy.$modal.msgSuccess(res.msg);
                        emits("addModal", false)
                    }
                })
            }
        })
    }
    function cancel(){
        emits("addModal", false)
    }
</script>
<style lang="scss" scoped>
    .footer-form{
        margin-top:40px;
    text-align:right;
    position: sticky;
    z-index: 13;
    bottom: 10px;
    background: #fff;
    }
</style>